@extends('layouts.back_stage')
@section('style')
    @parent
    <style>
        /*公共样式*/
        html,body,h1,h2,h3,h4,h5,h6,th,td,ul,ol,dl,li,dt,dd,p,input,form,fieldset,legend,textarea,select{margin:0;padding:0}
        img{border:0;vertical-align:top;}
        li{list-style:none;}
        a{text-decoration:none;}
        body{width:100%;height:100%;overflow-y:scroll;background-color:#f0f3f4;min-width:1000px;}
        html{min-height:100%;}
        input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {background-color: rgb(255, 255, 255);color:rgb(0, 0, 0);}
        /*扫码入仓*/
        .code{width:100%;height:100%;margin-top:80px;overflow-y: scroll}
        .code_top{width:80%;height:100px;margin:0 auto;border-bottom:1px solid #ccc;}
        .code_top .code_inp{width:500px;height:40px;margin-top:30px;outline:none;font-size:20px;padding-left:10px;color:#666;}
        .code_bottom{width:80%;margin:0 auto;height:auto;}
        .code_del{width:100%;height:30px;font-size:20px;color:#666;margin-bottom:20px;}
        .code_span{float:left;}
        .shape_div{width:500px;overflow: auto;}
        .shape{border-collapse:collapse;width:500px;font-size:14px;color:#383838;background:#fff;margin-bottom:10px;}
        .shape td{text-align:center;height:35px;}
        table,th,td{border:1px solid #ccc;}
        .codeDel{width:45px;height: 28px;background: red;color: #fff;outline: none;border: 0;border-radius:2px;font-size:14px;}
    </style>
@endsection
@section('content')
    <div class="code">
        <h3>分公司供货,最大码与大码关联出仓</h3>
        <div class="code_top">
            <input type="text" class="code_inp" />
        </div>
        <div class="code_bottom">
            <div class="code_del">
                <span class="code_span">已绑定二级码:</span>
            </div>
            <div class="shape_div">
                <table class="shape" border="1" cellspacing="0" cellpadding="0">
                    <tr><td>编号</td><td>操作</td></tr>
                    @if(isset($qrcodes) && count($qrcodes) > 0)
                        @foreach($qrcodes as $k=>$v)
                        <tr>
                            <td>{{ $v->qrcode }}</td>
                            <td class="{{ $v->id }}"> <button class="codeDel">删除</button></td>
                        </tr>
                        @endforeach
                        @endif
                </table>
            </div>
        </div>
    </div>
    <div class="mask" style="display: none"></div>
    <script>
        //自动获取焦点
        setTimeout(function () {
            $(".code_inp").focus();
        },50);
        $(function(){
            $('.code_inp').blur(function () {
                var that = this;
                setTimeout(function () {
                    $(that).focus();
                },100);
            });
        });
        var id = '{{ $_GET['id'] }}';
        /*input实时监控*/
        $(".code_inp").on("input",function(){
            var old_code = $('.code_inp').val();
            if(old_code.length != 66){
                return false;
            }
            var code = old_code.substr(-32,32);
            $('.code_inp').val('');
            if (code != '') {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    type: 'post',
                    url: '/applyForCargo/associateCode',
                    data: {'code':code,'id':id},
                    dataType:'json',
                    success: function (data) {
                        //console.log(data.msg.id);
                        var txt=data.msg;
                        if(txt.success == true){
                            $('.shape_div .shape').append("<tr>" +
                                "<td>"+code+"</td>" +"<td class="+data.msg.id+"> <button class=\"codeDel\">删除</button></td>"+
                                "</tr>");
//                            alert(code,"二维码关联成功");
                        }else{
                            $(".faceImg").attr("src","/img/weep.png");
                            $(".oHandle").text(txt.msg);
                            $(".oSuccess").show(0).delay(1000).hide(0);
                        }
                    }
                })
            }
        });
        /*删除*/
        $(document).on('click','.codeDel',function(){
            var code_id = $(this).parent().attr("class");
            var url_id = '{{ $_GET['id'] }}';
            $(".oText").text("确定要删除吗？");
            $(".oMask").show();
            $(".oAnim").show();
            $(".oBtn0").attr("abc",code_id);
            $(".oBtn0").attr("def",url_id);
            $(".oBtn0").attr('id','');
            $(".oBtn0").attr('id','oDelete');
        });
        /*点确定*/
        $(document).on('click','#oDelete',function(){
            $(".oMask").hide();
            $(".oAnim").hide();
            var sm_id=$(this).attr("abc");
            var sup_id=$(this).attr("def");
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                type:'post',
                url:'/applyForCargo/delete_qrcode',
                data:{
                    sm_id:sm_id,
                    sup_id:sup_id
                },
                dataType:'json',
                success:function (data) {
                    if(data.success == true){
                        $(".faceImg").attr("src","/img/laugh.png");
                        $(".oHandle").text("删除成功");
                        $(".oSuccess").show(0).delay(1000).hide(0);
                        window.location.reload();
                    }else{
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text(data.msg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            });
        });
    </script>
@endsection
